<template>
	<view class="shade flex" @tap="close(false)" :class="show ? 'show' : ''" :style="{ '--fss': app.theme.fss() }" @touchmove.stop.prevent>
		<view class="push-layer flex" :class="show ? 'show' : ''" @tap.stop>
			<view class="pcon-title flex">
				<text class="pcon-title-text">温馨提示</text>
				<view class="pcon-title-desc">
					尊敬的用户，根据国家相关法律法规，请先阅读并同意
					<text @tap="app.util.openUserPrivacy('user')">《用户协议》</text>
					与
					<text @tap="app.util.openUserPrivacy('privacy')">《隐私政策》</text>
				</view>
			</view>
			<view class="pcon-btn flex">
				<text class="pcon-item button-active" @tap.stop="close(false)">取消</text>
				<text class="pcon-item button-active" @tap.stop="close(true)">我已同意</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 打开弹窗时的参数
	const openParameter = ref({});
	
	
	/* 方法区域 */
	// 打开弹窗
	function open(e){
		openParameter.value = { success: e.success || function(){} }
		show.value = true;
	}
	
	// 关闭弹窗
	function close(flag){
		openParameter.value && openParameter.value.success(flag);
		show.value = false;
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.shade {
		background: rgba(0,0,0,0.6);
		.push-layer {
			background: #232526;
			padding: 40rpx 40rpx 44rpx 40rpx;
			border-radius: 12rpx;
			flex-direction: column;
			width: 95%;
			visibility: hidden;
			transition: 0.2s all;
			transform: scale(0);
			&.show {
				visibility: visible;
				transform: scale(1);
				animation: fadeInAndScale .2s cubic-bezier(.25,.1,.25,1.3);
				@keyframes fadeInAndScale {
					0% {
					    transform: scale(0);
					}
					70% {
					    transform: scale(1.1);
					}
					100% {
					    transform: scale(1);
					}
				}
			}
			.pcon-title {
				flex-direction: column;
				.pcon-title-text{
					flex-direction: column;
					font-weight: bold;
					font-size: calc(30rpx * var(--fss));
					text-align: center;
					line-height: 45rpx;
					color: rgba(255,255,255,0.9);
				}
				.pcon-title-desc {
					font-size: calc(28rpx * var(--fss));
					color: rgba(255, 255, 255, 0.5);
					margin-top: 15rpx;
					line-height: 45rpx;
					text{
						color: #76cdf2;
						font-weight: bold;
						transition: .2s all;
						&:active{
							opacity: 0.8;
						}
					}
				}
			}
			.pcon-btn {
				width: 100%;
				align-items: center;
				flex-direction: row;
				margin-top: 30rpx;
				.button-active {
					transition: 0s all !important;
				}
				.pcon-item {
					text-align: center;
					font-size: calc(28rpx * var(--fss));
					border-radius: 7rpx;
					background: rgba(255, 255, 255, 0.06);
					color: rgba(255,255,255,0.6);
					width: 0;
					flex: 1;
					line-height: 71rpx;
					&:nth-last-child(1) {
						margin-left: 26rpx;
						color: #FFF;
						background: #545a5e;
						font-weight: bold;
					}
					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>